<template>
  <el-container class="page">
      <el-header>
        <p style="color:#fff;font-weight:700">XXX大型后台管理系统</p>  
         <p>
             <span style="color:#fff">欢迎---{{$store.state.userInfo?$store.state.userInfo.username:""}}---</span>
             <a href="javascript:;" style="margin-right:20px;" @click="back">退出</a>
         </p>
         
      </el-header>
      <el-container class="page">
          <el-aside width="250px">  
              <v-navs></v-navs>   
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
      </el-container>
  </el-container>
</template>

<script>
import vNavs from "../components/vNavs"
export default {
   components:{
       vNavs
   },
   methods:{
       back(){
            this.$store.commit("setUserInfo",null)
            this.$router.replace("/login");
       }
   },
//    beforeRouteLeave(to,form,next){
//        this.$router.push("/login");
//         //   alert("确定要离开吗？")
//     //    this.$router.puch("/login");
//        location.reload(); 
//             // next("/login");
//             // location.reload(); 
//    }
  
}
</script>

<style scoped lang="stylus">
.el-container{
    padding 0
    margin 0
}
.page{
   width 100vw
   height 100vh
}
.el-header{
    background-color:  skyblue;
    line-height 60px
    display flex
    justify-content space-between
    
    
}
.el-aside{
    background-color: #545c64;
}
.el-main{
    flex 1
}

</style>